<template>
  <div class="war-management">
    <!-- 功能切换 -->
    <div class="function-tabs">
      <a-radio-group v-model:value="activeTab" button-style="solid" size="large">
        <a-radio-button value="conflicts">战事记录</a-radio-button>
        <a-radio-button value="casualties">伤亡统计</a-radio-button>
        <a-radio-button value="impact">影响评估</a-radio-button>
        <a-radio-button value="memorial">纪念档案</a-radio-button>
      </a-radio-group>
    </div>

    <!-- 战事记录 -->
    <div v-if="activeTab === 'conflicts'" class="conflicts-section">
      <a-card title="战争事件记录" class="conflicts-card">
        <template #extra>
          <a-space>
            <a-select v-model:value="conflictFilter" placeholder="战争类型" style="width: 120px">
              <a-select-option value="all">全部类型</a-select-option>
              <a-select-option value="civil">内战</a-select-option>
              <a-select-option value="invasion">侵略战争</a-select-option>
              <a-select-option value="rebellion">叛乱</a-select-option>
              <a-select-option value="border">边境冲突</a-select-option>
            </a-select>
            <a-button type="primary" @click="addConflict">记录战事</a-button>
          </a-space>
        </template>

        <a-table :columns="conflictColumns" :data-source="filteredConflicts" :loading="loading" row-key="id">
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'conflict'">
              <div>
                <div class="conflict-name">{{ record.name }}</div>
                <a-tag :color="getConflictColor(record.conflictType)">
                  {{ getConflictTypeName(record.conflictType) }}
                </a-tag>
                <div class="conflict-location">{{ record.location }}</div>
              </div>
            </template>

            <template v-else-if="column.key === 'duration'">
              <div>
                <div>{{ formatDate(record.startDate) }}</div>
                <div v-if="record.endDate">至 {{ formatDate(record.endDate) }}</div>
                <div v-else class="ongoing">进行中</div>
              </div>
            </template>

            <template v-else-if="column.key === 'casualties'">
              <div class="casualty-stats">
                <div class="casualty-item deaths">
                  <span class="label">死亡：</span>
                  <span class="value">{{ record.casualties?.deaths || 0 }}</span>
                </div>
                <div class="casualty-item wounded">
                  <span class="label">受伤：</span>
                  <span class="value">{{ record.casualties?.wounded || 0 }}</span>
                </div>
                <div class="casualty-item missing">
                  <span class="label">失踪：</span>
                  <span class="value">{{ record.casualties?.missing || 0 }}</span>
                </div>
              </div>
            </template>

            <template v-else-if="column.key === 'status'">
              <a-tag :color="getStatusColor(record.status)">
                {{ getStatusText(record.status) }}
              </a-tag>
            </template>

            <template v-else-if="column.key === 'actions'">
              <a-space>
                <a-button type="link" size="small" @click="viewDetail(record)">详情</a-button>
                <a-button type="link" size="small" @click="editConflict(record)">编辑</a-button>
                <a-button type="link" size="small" @click="viewMemorial(record)">纪念</a-button>
              </a-space>
            </template>
          </template>
        </a-table>
      </a-card>
    </div>

    <!-- 伤亡统计 -->
    <div v-if="activeTab === 'casualties'" class="casualties-section">
      <a-row :gutter="[24, 24]">
        <!-- 总体统计 -->
        <a-col :xs="24">
          <a-card title="伤亡总览" class="overview-card">
            <a-row :gutter="16">
              <a-col :xs="24" :sm="6">
                <a-statistic title="总死亡人数" :value="totalDeaths" suffix="人" />
              </a-col>
              <a-col :xs="24" :sm="6">
                <a-statistic title="总受伤人数" :value="totalWounded" suffix="人" />
              </a-col>
              <a-col :xs="24" :sm="6">
                <a-statistic title="失踪人数" :value="totalMissing" suffix="人" />
              </a-col>
              <a-col :xs="24" :sm="6">
                <a-statistic title="活跃冲突" :value="activeConflicts" suffix="起" />
              </a-col>
            </a-row>
          </a-card>
        </a-col>

        <!-- 图表分析 -->
        <a-col :xs="24" :lg="12">
          <a-card title="伤亡分布" class="chart-card">
            <div ref="casualtyChart" style="width: 100%; height: 300px"></div>
          </a-card>
        </a-col>

        <a-col :xs="24" :lg="12">
          <a-card title="时间趋势" class="chart-card">
            <div ref="trendChart" style="width: 100%; height: 300px"></div>
          </a-card>
        </a-col>
      </a-row>
    </div>

    <!-- 影响评估 -->
    <div v-if="activeTab === 'impact'" class="impact-section">
      <a-row :gutter="[24, 24]">
        <a-col :xs="24" :lg="16">
          <a-card title="社会影响评估" class="impact-card">
            <div class="impact-metrics">
              <div class="metric-item">
                <div class="metric-label">人口流失率</div>
                <div class="metric-value">{{ populationLoss }}%</div>
                <a-progress :percent="populationLoss" stroke-color="#f5222d" />
              </div>
              <div class="metric-item">
                <div class="metric-label">经济损失程度</div>
                <div class="metric-value">{{ economicLoss }}%</div>
                <a-progress :percent="economicLoss" stroke-color="#faad14" />
              </div>
              <div class="metric-item">
                <div class="metric-label">基础设施破坏</div>
                <div class="metric-value">{{ infrastructureDamage }}%</div>
                <a-progress :percent="infrastructureDamage" stroke-color="#1890ff" />
              </div>
              <div class="metric-item">
                <div class="metric-label">社会稳定性</div>
                <div class="metric-value">{{ socialStability }}%</div>
                <a-progress :percent="socialStability" stroke-color="#52c41a" />
              </div>
            </div>
          </a-card>
        </a-col>

        <a-col :xs="24" :lg="8">
          <a-card title="恢复建议" class="recovery-card">
            <div class="recovery-suggestions">
              <div class="suggestion-item">
                <h4>🏥 医疗救助</h4>
                <p>加强医疗资源配置，救治伤员</p>
              </div>
              <div class="suggestion-item">
                <h4>🏠 难民安置</h4>
                <p>建立临时安置点，保障基本生活</p>
              </div>
              <div class="suggestion-item">
                <h4>🛠️ 基建重建</h4>
                <p>优先修复关键基础设施</p>
              </div>
              <div class="suggestion-item">
                <h4>💰 经济援助</h4>
                <p>提供必要的财政支持</p>
              </div>
              <div class="suggestion-item">
                <h4>🕊️ 和平谈判</h4>
                <p>推动各方进行和平对话</p>
              </div>
            </div>
          </a-card>
        </a-col>
      </a-row>
    </div>

    <!-- 纪念档案 -->
    <div v-if="activeTab === 'memorial'" class="memorial-section">
      <a-card title="战争纪念档案" class="memorial-card">
        <div class="memorial-content">
          <div class="memorial-wall">
            <h3>英烈纪念墙</h3>
            <div class="hero-grid">
              <div v-for="hero in heroes" :key="hero.id" class="hero-card">
                <div class="hero-avatar">
                  <a-avatar :src="hero.avatar" size="large">
                    {{ hero.name?.charAt(0) }}
                  </a-avatar>
                </div>
                <div class="hero-info">
                  <div class="hero-name">{{ hero.name }}</div>
                  <div class="hero-rank">{{ hero.rank }}</div>
                  <div class="hero-conflict">{{ hero.conflict }}</div>
                  <div class="hero-date">{{ hero.deathDate }}</div>
                </div>
              </div>
            </div>
          </div>

          <div class="memorial-stats">
            <h3>纪念统计</h3>
            <a-row :gutter="16">
              <a-col :span="8">
                <a-statistic title="英烈总数" :value="totalHeroes" suffix="位" />
              </a-col>
              <a-col :span="8">
                <a-statistic title="纪念碑" :value="totalMonuments" suffix="座" />
              </a-col>
              <a-col :span="8">
                <a-statistic title="纪念活动" :value="memorialEvents" suffix="次" />
              </a-col>
            </a-row>
          </div>
        </div>
      </a-card>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, nextTick, onUnmounted, watch } from 'vue'
import { message } from 'ant-design-vue'
import dayjs from 'dayjs'
import * as echarts from 'echarts'
import { useLifeDeathStore } from '@/stores/lifeDeath'

// Store
const lifeDeathStore = useLifeDeathStore()

// 响应式数据
const activeTab = ref('conflicts')
const conflictFilter = ref('all')

// Chart refs
const casualtyChart = ref(null)
const trendChart = ref(null)

// Chart instances
let casualtyChartInstance = null
let trendChartInstance = null

// 表格列定义
const conflictColumns = [
  { title: '冲突名称', key: 'conflict', width: 200 },
  { title: '持续时间', key: 'duration', width: 150 },
  { title: '伤亡情况', key: 'casualties', width: 150 },
  { title: '规模', dataIndex: 'scale', key: 'scale', width: 100 },
  { title: '状态', key: 'status', width: 100 },
  { title: '操作', key: 'actions', width: 180, fixed: 'right' }
]

// 计算属性
const loading = computed(() => lifeDeathStore.loading)

const filteredConflicts = computed(() => {
  let conflicts = lifeDeathStore.specialCases.filter((c) => c.caseType === 'war')

  if (conflictFilter.value !== 'all') {
    conflicts = conflicts.filter((c) => c.conflictType === conflictFilter.value)
  }

  return conflicts
})

const totalDeaths = computed(() => {
  return lifeDeathStore.specialCases.filter((c) => c.caseType === 'war').reduce((sum, c) => sum + (c.casualties?.deaths || 0), 0)
})

const totalWounded = computed(() => {
  return lifeDeathStore.specialCases.filter((c) => c.caseType === 'war').reduce((sum, c) => sum + (c.casualties?.wounded || 0), 0)
})

const totalMissing = computed(() => {
  return lifeDeathStore.specialCases.filter((c) => c.caseType === 'war').reduce((sum, c) => sum + (c.casualties?.missing || 0), 0)
})

const activeConflicts = computed(() => {
  return lifeDeathStore.specialCases.filter((c) => c.caseType === 'war' && c.status === 'active').length
})

const populationLoss = computed(() => Math.floor(Math.random() * 30) + 10)
const economicLoss = computed(() => Math.floor(Math.random() * 50) + 20)
const infrastructureDamage = computed(() => Math.floor(Math.random() * 40) + 15)
const socialStability = computed(() => Math.floor(Math.random() * 30) + 50)

const heroes = ref([
  { id: 1, name: '张勇', rank: '中尉', conflict: '北方战役', deathDate: '2023-03-15' },
  { id: 2, name: '李强', rank: '上士', conflict: '边境冲突', deathDate: '2023-05-20' },
  { id: 3, name: '王军', rank: '少校', conflict: '内战', deathDate: '2023-07-08' }
])

const totalHeroes = computed(() => heroes.value.length)
const totalMonuments = computed(() => Math.floor(Math.random() * 10) + 5)
const memorialEvents = computed(() => Math.floor(Math.random() * 20) + 10)

// 方法
const addConflict = () => {
  message.info('记录战事功能开发中...')
}

const viewDetail = (record) => {
  message.info(`查看 ${record.name} 的详细信息`)
}

const editConflict = (record) => {
  message.info(`编辑 ${record.name} 的信息`)
}

const viewMemorial = (record) => {
  message.info(`查看 ${record.name} 的纪念信息`)
}

// 绘制图表
const drawCasualtyChart = () => {
  console.log('开始绘制伤亡分布图')

  if (!casualtyChart.value) {
    console.log('伤亡分布图表容器不存在')
    return
  }

  try {
    // 从store获取战争事件数据
    const warEvents = lifeDeathStore.specialCases.filter((c) => c.caseType === 'war')
    console.log('获取到战争事件数据:', warEvents.length, '条')

    // 按受害者类型统计伤亡数据
    const victimTypeStats = {}
    const categories = ['军人', '平民', '儿童', '老人', '其他']

    // 初始化统计
    categories.forEach((category) => {
      victimTypeStats[category] = { deaths: 0, wounded: 0, missing: 0 }
    })

    // 统计真实数据
    warEvents.forEach((event) => {
      if (event.casualties) {
        const victimType = event.victimType || '军人'
        const type = categories.includes(victimType) ? victimType : '其他'

        victimTypeStats[type].deaths += event.casualties.deaths || 0
        victimTypeStats[type].wounded += event.casualties.wounded || 0
        victimTypeStats[type].missing += event.casualties.missing || 0
      }
    })

    // 转换为图表数据
    const chartData = categories.map((category) => {
      const stats = victimTypeStats[category]
      return stats.deaths + stats.wounded + stats.missing
    })

    console.log('伤亡分布统计数据:', chartData)

    // 如果没有真实数据，使用模拟数据
    const data = chartData.some((val) => val > 0) ? chartData : categories.map(() => Math.floor(Math.random() * 5000) + 1000)

    // 初始化ECharts实例
    const chart = echarts.init(casualtyChart.value)

    // 配置图表选项
    const option = {
      title: {
        text: '战争伤亡分布',
        left: 'center',
        textStyle: {
          color: '#ffffff',
          fontSize: 16
        }
      },
      tooltip: {
        trigger: 'axis',
        backgroundColor: 'rgba(0, 0, 0, 0.8)',
        borderColor: '#ff4d4f',
        textStyle: {
          color: '#ffffff'
        },
        formatter: function (params) {
          const item = params[0]
          return `${item.name}<br/>伤亡人数: ${item.value.toLocaleString()}人`
        }
      },
      legend: {
        show: false
      },
      grid: {
        left: '10%',
        right: '10%',
        bottom: '10%',
        top: '20%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: categories,
        axisLine: {
          lineStyle: {
            color: 'rgba(255, 255, 255, 0.5)'
          }
        },
        axisLabel: {
          color: 'rgba(255, 255, 255, 0.8)',
          fontSize: 12
        },
        axisTick: {
          show: false
        }
      },
      yAxis: {
        type: 'value',
        name: '人数',
        nameTextStyle: {
          color: 'rgba(255, 255, 255, 0.8)'
        },
        axisLine: {
          show: false
        },
        axisLabel: {
          color: 'rgba(255, 255, 255, 0.8)',
          formatter: function (value) {
            if (value >= 10000) {
              return (value / 10000).toFixed(1) + '万'
            }
            return value.toLocaleString()
          }
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(255, 255, 255, 0.1)'
          }
        }
      },
      series: [
        {
          name: '伤亡人数',
          type: 'bar',
          data: data,
          barWidth: '60%',
          itemStyle: {
            borderRadius: [4, 4, 0, 0],
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#ff4d4f' },
              { offset: 0.5, color: '#ff7875' },
              { offset: 1, color: '#ffadd6' }
            ])
          },
          emphasis: {
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#ff7875' },
                { offset: 1, color: '#ffadd6' }
              ])
            }
          },
          label: {
            show: true,
            position: 'top',
            color: '#ffffff',
            fontSize: 11,
            fontWeight: 'bold',
            formatter: function (params) {
              if (params.value >= 10000) {
                return (params.value / 10000).toFixed(1) + '万'
              }
              return params.value.toLocaleString()
            }
          }
        }
      ]
    }

    // 设置图表选项
    chart.setOption(option)

    // 保存chart实例
    casualtyChartInstance = chart

    // 响应式调整
    const resizeChart = () => {
      chart.resize()
    }
    window.addEventListener('resize', resizeChart)

    // 组件销毁时移除事件监听
    onUnmounted(() => {
      window.removeEventListener('resize', resizeChart)
      chart.dispose()
    })

    console.log('伤亡分布图绘制完成')
  } catch (error) {
    console.error('绘制伤亡分布图时出错:', error)
  }
}

const drawTrendChart = () => {
  console.log('开始绘制时间趋势图')

  if (!trendChart.value) {
    console.log('时间趋势图表容器不存在')
    return
  }

  try {
    // 获取战争事件数据
    const warEvents = lifeDeathStore.specialCases.filter((c) => c.caseType === 'war')
    console.log('获取到战争事件数据:', warEvents.length, '条')

    // 获取最近12个月的数据
    const monthlyData = []
    const monthLabels = []

    for (let i = 11; i >= 0; i--) {
      const month = dayjs().subtract(i, 'month')
      monthLabels.push(month.format('MM月'))

      // 统计该月的战争伤亡数量
      const monthStr = month.format('YYYY-MM')
      let monthCasualties = 0

      // 统计在该月发生的战争事件造成的伤亡
      warEvents.forEach((event) => {
        if (event.startDate && event.casualties) {
          const eventMonth = dayjs(event.startDate).format('YYYY-MM')
          if (eventMonth === monthStr) {
            monthCasualties += (event.casualties.deaths || 0) + (event.casualties.wounded || 0) + (event.casualties.missing || 0)
          }
        }
      })

      // 如果没有真实数据，使用模拟数据
      const casualtyCount = monthCasualties > 0 ? monthCasualties : Math.floor(Math.random() * 2000) + 500
      monthlyData.push(casualtyCount)
    }

    console.log('时间趋势数据:', monthlyData)

    // 初始化ECharts实例
    const chart = echarts.init(trendChart.value)

    // 配置图表选项
    const option = {
      title: {
        text: '战争伤亡时间趋势',
        left: 'center',
        textStyle: {
          color: '#ffffff',
          fontSize: 16
        }
      },
      tooltip: {
        trigger: 'axis',
        backgroundColor: 'rgba(0, 0, 0, 0.8)',
        borderColor: '#ff4d4f',
        textStyle: {
          color: '#ffffff'
        },
        formatter: function (params) {
          const item = params[0]
          return `${item.name}<br/>战争伤亡: ${item.value.toLocaleString()}人`
        }
      },
      legend: {
        show: false
      },
      grid: {
        left: '10%',
        right: '10%',
        bottom: '10%',
        top: '20%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: monthLabels,
        axisLine: {
          lineStyle: {
            color: 'rgba(255, 255, 255, 0.5)'
          }
        },
        axisLabel: {
          color: 'rgba(255, 255, 255, 0.8)',
          fontSize: 12
        },
        axisTick: {
          show: false
        }
      },
      yAxis: {
        type: 'value',
        name: '人数',
        nameTextStyle: {
          color: 'rgba(255, 255, 255, 0.8)'
        },
        axisLine: {
          show: false
        },
        axisLabel: {
          color: 'rgba(255, 255, 255, 0.8)',
          formatter: function (value) {
            if (value >= 10000) {
              return (value / 10000).toFixed(1) + '万'
            }
            return value.toLocaleString()
          }
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(255, 255, 255, 0.1)'
          }
        }
      },
      series: [
        {
          name: '战争伤亡',
          type: 'line',
          data: monthlyData,
          smooth: true,
          symbol: 'circle',
          symbolSize: 6,
          lineStyle: {
            color: '#ff4d4f',
            width: 3,
            shadowColor: 'rgba(255, 77, 79, 0.3)',
            shadowBlur: 10
          },
          itemStyle: {
            color: '#ff4d4f',
            borderColor: '#ffffff',
            borderWidth: 2
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(255, 77, 79, 0.4)' },
              { offset: 0.5, color: 'rgba(255, 77, 79, 0.2)' },
              { offset: 1, color: 'rgba(255, 77, 79, 0.05)' }
            ])
          },
          label: {
            show: false
          },
          emphasis: {
            focus: 'series',
            itemStyle: {
              shadowBlur: 20,
              shadowColor: 'rgba(255, 77, 79, 0.8)'
            }
          }
        }
      ]
    }

    // 设置图表选项
    chart.setOption(option)

    // 保存chart实例
    trendChartInstance = chart

    // 响应式调整
    const resizeChart = () => {
      chart.resize()
    }
    window.addEventListener('resize', resizeChart)

    // 组件销毁时移除事件监听
    onUnmounted(() => {
      window.removeEventListener('resize', resizeChart)
      chart.dispose()
    })

    console.log('时间趋势图绘制完成')
  } catch (error) {
    console.error('绘制时间趋势图时出错:', error)
  }
}

// 刷新图表数据
const refreshCharts = () => {
  console.log('刷新图表数据')
  if (activeTab.value === 'casualties') {
    nextTick(() => {
      drawCasualtyChart()
      drawTrendChart()
    })
  }
}

// 监听数据变化
watch(
  () => lifeDeathStore.specialCases,
  (newCases) => {
    console.log('检测到specialCases数据变化:', newCases.filter((c) => c.caseType === 'war').length, '条战争数据')
    if (activeTab.value === 'casualties') {
      refreshCharts()
    }
  },
  { deep: true }
)

// 监听tab切换
watch(activeTab, (newTab) => {
  if (newTab === 'casualties') {
    nextTick(() => {
      refreshCharts()
    })
  }
})

// 工具方法
const getConflictColor = (type) => {
  const colors = {
    civil: 'red',
    invasion: 'volcano',
    rebellion: 'orange',
    border: 'purple'
  }
  return colors[type] || 'default'
}

const getConflictTypeName = (type) => {
  const names = {
    civil: '内战',
    invasion: '侵略战争',
    rebellion: '叛乱',
    border: '边境冲突'
  }
  return names[type] || type
}

const getStatusColor = (status) => {
  const colors = {
    active: 'red',
    ended: 'green',
    ceasefire: 'orange'
  }
  return colors[status] || 'default'
}

const getStatusText = (status) => {
  const texts = {
    active: '进行中',
    ended: '已结束',
    ceasefire: '停火'
  }
  return texts[status] || status
}

const formatDate = (dateString) => {
  return dayjs(dateString).format('YYYY-MM-DD')
}

// 生命周期
onMounted(() => {
  // 确保store数据已加载
  if (lifeDeathStore.specialCases.length === 0) {
    console.log('Store数据为空，触发数据加载...')
    lifeDeathStore.fetchLifeRecords()
  }

  nextTick(() => {
    console.log('组件挂载完成，开始绘制图表...')
    console.log('当前战争数据条数:', lifeDeathStore.specialCases.filter((c) => c.caseType === 'war').length)
    drawCasualtyChart()
    drawTrendChart()
  })
})

// 组件销毁时清理
onUnmounted(() => {
  console.log('组件销毁，清理chart实例...')
  if (casualtyChartInstance) {
    casualtyChartInstance.dispose()
    casualtyChartInstance = null
  }
  if (trendChartInstance) {
    trendChartInstance.dispose()
    trendChartInstance = null
  }
})
</script>

<style lang="scss" scoped>
@use '@/styles/variables.scss' as *;

.war-management {
  .function-tabs {
    margin-bottom: 24px;
    text-align: center;
  }

  .conflict-name {
    font-weight: 500;
    color: $text-primary;
    margin-bottom: 4px;
  }

  .conflict-location {
    font-size: 12px;
    color: $text-tertiary;
    margin-top: 4px;
  }

  .ongoing {
    color: #f5222d;
    font-weight: 500;
  }

  .casualty-stats {
    .casualty-item {
      display: flex;
      margin-bottom: 2px;

      .label {
        color: $text-secondary;
      }

      .value {
        color: $text-primary;
        font-weight: 500;
      }

      &.deaths .value {
        color: #f5222d;
      }

      &.wounded .value {
        color: #faad14;
      }

      &.missing .value {
        color: #1890ff;
      }
    }
  }

  .impact-metrics {
    .metric-item {
      margin-bottom: 24px;

      .metric-label {
        color: $text-secondary;
        margin-bottom: 8px;
      }

      .metric-value {
        font-size: 18px;
        font-weight: bold;
        color: $text-primary;
        margin-bottom: 8px;
      }
    }
  }

  .recovery-suggestions {
    .suggestion-item {
      margin-bottom: 20px;
      padding: 12px;
      background: rgba(255, 255, 255, 0.05);
      border-radius: 8px;

      h4 {
        color: $text-primary;
        margin-bottom: 8px;
      }

      p {
        color: $text-secondary;
        margin: 0;
        font-size: 12px;
      }
    }
  }

  .memorial-content {
    .memorial-wall {
      margin-bottom: 32px;

      h3 {
        color: $text-primary;
        margin-bottom: 20px;
      }

      .hero-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 16px;

        .hero-card {
          display: flex;
          align-items: center;
          padding: 12px;
          background: rgba(255, 255, 255, 0.05);
          border: 1px solid $border-color;
          border-radius: 8px;

          .hero-avatar {
            margin-right: 12px;
          }

          .hero-info {
            .hero-name {
              font-weight: 500;
              color: $text-primary;
              margin-bottom: 2px;
            }

            .hero-rank,
            .hero-conflict,
            .hero-date {
              font-size: 12px;
              color: $text-secondary;
              margin-bottom: 2px;
            }
          }
        }
      }
    }

    .memorial-stats {
      h3 {
        color: $text-primary;
        margin-bottom: 20px;
      }
    }
  }
}
</style>
